<template>
  <div class='over'>
    <div class="content" v-if="recordLists.length">
      <div class="record-item" v-for="(list,index) in recordLists" :key="list.id">
        <div class="left">
          <!-- {{list.dateAdd.slice(0,10).split('-')[0]}}
                    <br>{{list.dateAdd.slice(0,10).split('-')[1]}}/{{list.dateAdd.slice(0,10).split('-')[2]}} -->
        </div>
        <div class="right">
          <p>
            <em>订单编号：</em>
            <span>{{list.sn}}</span>
          </p>
          <p>
            <em>订单状态：</em>
            <span>{{list.statusKey}}</span>
          </p>
          <p>
            <em>订单时间：</em>
            <span>{{list.dateAdd|dateTimeFilter}}</span>
          </p>
          <p>
            <em>维护时间：</em>
            <span>{{list.dateService|dateTimeFilter}}</span>
          </p>
          <p>
            <em>维护项目：</em>
            <span>{{list.product}}</span>
          </p>
          <p>
            <em>服务人员：</em>
            <span>{{list.name}}
              <em>{{list.phone}}</em>
            </span>
          </p>
          <p>
            <em>故障描述：</em>
            <span>{{list.problem}}</span>
          </p>
        </div>
      </div>
    </div>
    <noitem v-else>
      <p slot="tip">暂无记录</p>
    </noitem>
    <loading v-if="is_loading"></loading>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      recordLists: [] // 维护项目列表
    };
  },
  created() {
    this.isLoading(true);
    this.axios
      .post(root + "/api/order/wx/getMyServiceRecord", {
        wxOpenid: this.token,
        status: 2
      })
      .then(res => {
        this.isLoading(false);
        this.recordLists = res.data.data;
      });
  },
  filters: {
    dateTimeFilter(date) {
      if (date != null) {
        console.log(date);
        return moment(date).format("YYYY-MM-DD HH:mm");
      } else {
        return "";
      }
    }
  },
  methods: {
    ...mapActions(["isLoading"])
  },
  computed: {
    ...mapState(["is_loading", "token"])
  }
};
</script>

<style lang="less" scoped>
@import "../../../common/style/mixin.less";
.over {
  .content {
    position: relative;
    .record-item {
      display: -webkit-flex;
      align-items: center;
      .ft;
      color: #222;
      padding: 0.35rem 0.35rem 0.35rem 0.5rem;
      &:nth-child(2) {
        background: #fff;
      }
      .left {
        .layout-center;
        position: relative;
        .wh(0.6rem, 0.6rem);
        .ft;
        .tc;
        color: #fff;
        font-weight: 700;
        margin-right: 0.35rem;
        background: #5b91fe;
        border: 4px solid #fff;
        box-shadow: 0 3px 5px 0 #d0d0d0;
        .br(50%);
        z-index: 2;
      }
      .right {
        flex: 1;
        line-height: 0.5rem;
        p {
          display: -webkit-flex;
        }
        span {
          flex: 3;
        }
      }
    }
    &:after {
      content: "";
      position: absolute;
      left: 0.84rem;
      top: 0;
      height: 100%;
      width: 1px;
      background: #5b91fe;
    }
  }
}
</style>